<script setup>
import {reactive, ref} from "vue";
import {useRouter} from 'vue-router';
import {useUserStore} from '@/stores/pages/user';
import {APP_CONFIG} from '@/config';
import { mockUserData } from '@/mock/userMock.js';

const userStore = useUserStore();
const {loading, login} = userStore;
const router = useRouter();

const form = reactive({
  username: '',
  password: ''
})

const rules = {
  username: [
    {required: true, message: '请输入用户名', trigger: 'blur'},
    {min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur'}
  ],
  password: [
    {required: true, message: '请输入密码', trigger: 'blur'},
    {min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur'}
  ]
}

const loginFormRef = ref();

// 登录提交处理
const onsubmit = async () => {
  try {
    // 只有在非mock模式下才进行表单验证
    if (APP_CONFIG.AUTH_MODE !== 'mock') {
      await loginFormRef.value.validate();
    }

    // 根据不同模式执行登录
    const result = await login(form);

    if (result.success) {
      // 跳转到首页
      router.push('/app/dashboard');
    }
  } catch (error) {
    console.error('Login error:', error);
  }
}

// 处理回车键登录
const handleKeyPress = (event) => {
  if (event.key === 'Enter') {
    onsubmit();
  }
}

// Mock模式直接登录 - 超级管理员
const handleMockLoginAsSuperAdmin = async () => {
  form.username = 'admin';
  form.password = 'admin123';
  await onsubmit();
}

// Mock模式直接登录 - 管理员
const handleMockLoginAsAdmin = async () => {
  form.username = 'manager';
  form.password = 'manager123';
  await onsubmit();
}

// Mock模式直接登录 - 普通用户
const handleMockLoginAsUser = async () => {
  form.username = 'user001';
  form.password = 'user123';
  await onsubmit();
}
</script>

<template>
  <div class="login-container">
    <div class="information-area" id="information-area">
      <span>欢迎使用本系统</span>
      <p>Welcome&nbsp;&nbsp;&nbsp;to&nbsp;&nbsp;&nbsp;our&nbsp;&nbsp;&nbsp;system!</p>
    </div>

    <div class="login-area">
      <span>Sign&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;In</span>

      <!-- Mock模式下显示快速登录按钮 -->
      <div v-if="APP_CONFIG.AUTH_MODE === 'mock'" class="mock-login-btn">
        <el-button type="success" @click="handleMockLoginAsSuperAdmin" class="submit-btn">以超级管理员登录</el-button>
        <el-button type="primary" @click="handleMockLoginAsAdmin" class="submit-btn">以管理员登录</el-button>
        <el-button type="info" @click="handleMockLoginAsUser" class="submit-btn">以普通用户登录</el-button>
      </div>

      <el-form
          v-if="APP_CONFIG.AUTH_MODE !== 'mock'"
          :model="form"
          ref="loginFormRef"
          :rules="rules"
          @keyup.enter="handleKeyPress"
          size="large"
      >
        <el-form-item prop="username">
          <el-input v-model="form.username" placeholder="username"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="form.password" type="password" placeholder="password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
              type="primary"
              @click="onsubmit"
              :loading="loading"
              class="submit-btn"
          >
            {{ loading ? '登录中...' : '登录' }}
          </el-button>
        </el-form-item>
      </el-form>

      <!-- 模式切换说明 -->
      <div class="mode-info">
        当前模式: {{ APP_CONFIG.AUTH_MODE }}
      </div>
    </div>
  </div>
</template>

<style scoped>
.login-container {
  display: flex;
  z-index: 3;
}

.information-area {
  height: 600px;
  width: 800px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  span {
    font-size: 50px;
    font-weight: bold;
    letter-spacing: 17px;
    margin-bottom: 10px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  }

  p {
    letter-spacing: 7px;
    margin-bottom: 20px;
  }
}

.login-area {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: auto;
  width: 450px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 15px;
  padding: 40px;
  box-shadow: 5px 10px 20px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.18);

  span {
    color: black;
    font-weight: bolder;
    font-size: 45px;
    margin-bottom: 40px;
    text-shadow: 5px 10px 20px rgba(0, 0, 0, 0.3);
    user-select: none;
  }

  .mock-login-btn {
    width: 100%;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    
    .el-button {
      margin-bottom: 10px;
      width: 100%;
    }
  }

  .mode-info {
    margin-top: 20px;
    font-size: 12px;
    color: #666;
  }
}

:deep(.el-input) {
  width: 280px;

  .el-input__wrapper { /*  输入框包装层 */
    background-color: #ffffff;
    box-shadow: 5px 10px 20px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    height: 55px;
    margin-bottom: 10px;

    .el-input__inner { /* 输入元素 */
      color: black;
      height: 100%;
    }
  }
}

/* 悬停样式 */
:deep(.el-input:hover .el-input__wrapper) {
  border: 3px solid #337ecc;
  box-shadow: 0 0 0 2px rgba(51, 126, 204, 0.2);
}

/* 聚焦样式*/
:deep(.el-input__wrapper.is-focus) {
  border: 3px solid #ec3b7c;
  box-shadow: none;
}

/* 提示字体 */
:deep(.el-input__inner::placeholder) {
  color: black;
  font-size: 14px;
  opacity: 0.4;
}

/* 移除错误状态下的红框样式 */
:deep(.el-form-item.is-error .el-input__wrapper) {
  box-shadow: 5px 10px 20px rgba(0, 0, 0, 0.2) !important;
}

.submit-btn {
  width: 100%;
  border-radius: 8px;
  height: 55px;
  border: none;
  background-color: black;
}
</style>